<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="box"> <img src="https://res.cloudinary.com/vaqar/image/upload/v1499826226/DSC_0361_y3mv4r.jpg" class="image"></p> </img> <div id="TextHidden">Hovering<p id="screen-log"></p></div> </div> </div> <script> let screenLog = document.querySelector('#screen-log'); document.addEventListener('mousemove', logKey); function logKey(e) { placeDiv(e.screenX, e.screenY); placeDiv(e.clientX, e.clientY); screenLog.innerText = ` Screen X/Y: ${e.screenX}, ${e.screenY} Client X/Y: ${e.clientX}, ${e.clientY}`; } function placeDiv(x_pos, y_pos) { var d = document.getElementById('TextHidden'); d.style.position = "absolute"; d.style.left = x_pos+'px'; d.style.top = y_pos+'px'; } </script>

#box { width: 40%; display: flex; align-items: center; justify-content: center; position: absolute; } .image { display: block; width: 100%; z-index: 1; } #TextHidden { display: none; color: red; font-size: 20px; z-index: 10; } #box:hover #TextHidden { display: block; } #screen-log { z-index: 11; }